<template>
  <a-form-item
    class="mjor-sign-input"
    v-if="type === 'text'"
    :label="title"
    :field="field"
    :required="required"
  >
    <template #label>
      <a-tooltip :content="title" position="bottom">
        <span>{{ title }}</span>
      </a-tooltip>
    </template>
    <a-textarea
      v-model="form[String(field)]"
      :disabled="disabled"
      allow-clear
      @change="(value) => handleChange(value, item)"
    />
  </a-form-item>
  <a-form-item
    class="mjor-sign-select"
    v-if="type === 'select'"
    :label="title"
    :field="field"
    :required="required"
  >
    <template #label>
      <a-tooltip :content="title" position="bottom">
        <span>{{ title }}</span>
      </a-tooltip>
    </template>
    <a-select
      placeholder="请选择"
      allow-clear
      v-model="form[String(field)]"
      :disabled="disabled"
      @change="(value) => handleChange(value, item)"
    >
      <a-option v-for="it in data" :key="it?.value" :value="it?.value">{{
        it?.label
      }}</a-option>
    </a-select>
  </a-form-item>
  <a-form-item
    class="mjor-sign-cascader"
    v-if="type === 'child_select'"
    :label="title"
    :field="field"
    :required="required"
  >
    <template #label>
      <a-tooltip :content="title" position="bottom">
        <span>{{ title }}</span>
      </a-tooltip>
    </template>
    <a-cascader
      v-model="form[String(field)]"
      path-mode
      :options="data"
      :disabled="disabled"
      placeholder="请选择"
      allow-clear
      @change="(value) => handleChange(value, item)"
    />
  </a-form-item>
  <a-form-item
    class="mjor-sign-radio"
    v-if="type === 'radiobox'"
    :label="title"
    :field="field"
    :required="required"
  >
    <template #label>
      <a-tooltip :content="title" position="bottom">
        <span>{{ title }}</span>
      </a-tooltip>
    </template>
    <a-radio-group
      v-model="form[String(field)]"
      :disabled="disabled"
      @change="(value) => handleChange(value, item)"
    >
      <a-grid :cols="3" :colGap="24" :rowGap="16">
        <a-grid-item v-for="it in data" :key="it?.value" :title="it.label" class="radio-text">
          <a-radio :value="it?.value">{{ it?.label }}</a-radio>
        </a-grid-item>
      </a-grid>
    </a-radio-group>
  </a-form-item>
  <a-form-item
    class="mjor-sign-checkbox"
    v-if="type === 'checkbox'"
    :label="title"
    :field="field"
    :required="required"
  >
    <template #label>
      <a-tooltip :content="title" position="bottom">
        <span>{{ title }}</span>
      </a-tooltip>
    </template>
    <a-checkbox-group
      v-model="form[String(field)]"
      :disabled="disabled"
      @change="(value) => handleChange(value, item)"
    >
      <a-grid :cols="3" :colGap="24" :rowGap="16">
        <a-grid-item v-for="it in data" :key="it?.value">
          <a-checkbox :value="it?.value">{{ it?.label }}</a-checkbox>
        </a-grid-item>
      </a-grid>
    </a-checkbox-group>
  </a-form-item>
</template>
<script lang="ts" setup name="FormItem">
interface Prop {
  item: Right.FormOptions;
  type: string;
  title: string;
  field: string;
  disabled: boolean;
  data?: any[];
  required: boolean;
  form: { [x: string | number]: any };
  handleChange: (
    value:
      | string
      | number
      | boolean
      | (string | number | boolean)[]
      | Record<string, any>
      | (
          | string
          | number
          | Record<string, any>
          | (string | number | Record<string, any>)[]
        )[]
      | undefined,
    item: Right.FormOptions
  ) => void;
}
defineProps<Prop>();
</script>
<style lang="less" scoped>
@import url("../index.less");
</style>
